<template>
  <el-container style="height: 800px; border: 1px solid #eee">
    <el-header>
      <Top :userName="userName" :nowTime="nowTime" @login="login"></Top>
    </el-header>
    <el-main>
      <el-aside width="12%" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '2']">
          <el-submenu index='1'>
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index='2'>
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index='3'>
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
          </el-submenu>
          <el-submenu index='4'>
            <template slot="title"><i class="el-icon-setting"></i>导航四</template>
          </el-submenu>
          <el-submenu index='5'>
            <template slot="title"><i class="el-icon-setting"></i>导航五</template>
          </el-submenu>
          <el-submenu index='6'>
            <template slot="title"><i class="el-icon-setting"></i>导航六</template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <div class="main_panel">
          <div class="main_text">{{ mainText }}</div>
          <div class="main_text" v-text="vText"></div>
          <div class="main_text" v-html="vHtmlText"></div>
      </div>
    </el-main>
    <el-footer>
      <Bottom></Bottom>
    </el-footer>
  </el-container>
</template>

<script>
import Top from '@/views/components/top.vue'
import Bottom from '@/views/components/bottom.vue'
import moment from 'moment'
export default {
  name: 'Main',
  components: { Top, Bottom },
  data () {
    return {
      mainText: '我是主页面',
      userName: 'admin',
      vText: '<p><h4>我是v-text渲染出来的数据</h4></p>',
      vHtmlText: '<p><h4>我是v-html渲染出来的数据</h4></p>',
      nowTime: ''
    }
  },
  methods: {
    login (message) {
      this.mainText = this.mainText + ', ' + this.userName + message
    },
    getServiceTime () {
      this.$axios.get('https://front.szxqcjj.com/front/common/auth/getServiceTime').then((result) => {
        // console.log(result.data.data)
        this.nowTime = moment(result.data.data.nowTime).format('YYYY-MM-DD HH:mm:ss')
      })
    }
  },
  created () {
    this.timer = setInterval(() => {
      this.getServiceTime()
    }, 1000)
  }
}
</script>

<style scoped>
.el-main {
  display: flex;
}
.main_panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  /* height: 500px;
  min-height: 500px; */
}
.main_text {
  font-weight: normal;
  font-size: 22px;
  margin: 10px 0;
}
</style>
